<template>
  <div class="content">
    <div class="content-box">
      <h3>水费征收</h3>
      <div style="text-align: right;padding-right: 10px;padding-bottom: 5px">
        <a-button @click="visibleBtn" style="color: #1D79FA" type="link">
          缴费记录
        </a-button>
      </div>
      <div class="content-bottom">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="按天计费">
            <div
              style="display: flex;align-items: center;justify-content: space-between;font-size: 15px;margin-top: 20px">
              单价:
              <a-input placeholder="请输入单价" v-model="singleLeft" type="number" style="width: 88%;height: 44px;"/>
            </div>
            <div
              style="display: flex;align-items: center;justify-content: space-between;font-size: 15px;margin-top: 40px">
              日期:
              <a-range-picker :value="createValue" @change="onChangeLeft" style="width: 88%;height: 46px;"/>
            </div>
            <a-button class="btn" @click="btnLeft">查询</a-button>
          </a-tab-pane>
          <a-tab-pane key="2" tab="按流量计费" force-render>
            <div
              style="display: flex;align-items: center;justify-content: space-between;font-size: 15px;margin-top: 20px">
              单价:
              <a-input placeholder="请输入单价" v-model="singleLeft" type="number" style="width: 88%;height: 44px;"/>
            </div>
            <div
              style="display: flex;align-items: center;justify-content: space-between;font-size: 15px;margin-top: 40px">
              日期:
              <a-range-picker :value="createValue" @change="onChangeLeft" style="width: 88%;height: 46px;"/>
            </div>
            <a-button class="btn" @click="btnLeft">查询</a-button>
          </a-tab-pane>
        </a-tabs>
        <div class="money">
          <div class="money-box">
            用水量：<span>{{ water.toFixed(2) }}</span>方
          </div>
          <div class="money-box">
            应收费：<span>{{ chargeable == NaN ? 0 : chargeable }}</span>元
          </div>
        </div>
        <div style="width: 250px; height: 1px; background: #E2E3E3;margin: 15px auto;"></div>

        <div class="money-bottom">
          <div class="" style="margin: 0 auto;font-size: 16px;font-weight: bolder;text-align: center;">
            <p style="margin: 0;font-size: 20px">{{ price }}</p>
            卡内余额
          </div>
          <a-button
            @click="$router.push('/wfinfo/chargeManagement/chargeCollection')"
            style="position: absolute;top: 16px; right: 68px;color: #21A8FC;border-color: #21A8FC;">缴费
          </a-button>
        </div>
      </div>
      <div class="code">
        <img src="../../../assets/code.png">
        <p>扫码缴费</p>
      </div>
    </div>
    <paymentRecord ref="paymentRecord"></paymentRecord>
  </div>
</template>

<script>
import {queryFlowmeter, queryBalanceInfo} from '@/api/device'
import paymentRecord from './paymentRecord'

export default {
  data() {
    return {
      singleLeft: '',
      singleRight: '',
      singleLeftTime: '',
      chargeable: 0,
      startDateLeft: '',
      endDateLeft: '',
      water: 0,
      key: 1,
      createValue: [],
      price: ''
    }
  },
  components: {
    paymentRecord
  },
  mounted() {
    this.dataList()
  },
  methods: {
    btnLeft() {
      queryFlowmeter(this.startDateLeft, this.endDateLeft).then(res => {
        this.water = res.result.endValue - res.result.startValue
        this.$message.success('查询成功');
        if (this.key == '1') {
          this.chargeable = this.singleLeftTime * this.singleLeft
          return false
        } else {
          this.chargeable = this.singleLeft * this.water.toFixed(2)
        }
      }).catch(err => {
        this.$message.error('查询失败');
      })
    },
    dataList() {
      queryBalanceInfo().then(res => {
        console.log(res)
        this.price = res.result.priceTotal
      }).catch(err => {

      })
    },
    visibleBtn() {
      this.$refs.paymentRecord.visible = true
      this.$refs.paymentRecord.dataList()
    },
    onChangeLeft(date, dateString) {
      this.createValue = date;
      console.log(this.createValue)
      this.startDateLeft = dateString[0]
      this.endDateLeft = dateString[1]

      function getDaysBetween(dateString1, dateString2) {
        var startDate = Date.parse(dateString1);
        var endDate = Date.parse(dateString2);
        if (startDate > endDate) {
          return 0;
        }
        if (startDate == endDate) {
          return 1;
        }
        var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
        return days;
      }

      this.singleLeftTime = getDaysBetween(dateString[0], dateString[1])
      // console.log(getDaysBetween(dateString[0], dateString[1]))
    },
    search() {
      queryFlowmeter(this.startDateLeft, this.endDateLeft).then(res => {
        console.log(res)
      }).catch(err => {

      })
    },
    callback(key) {
      this.createValue = []
      this.key = key
      console.log(key)
      this.singleLeft = ''
      this.startDateLeft = ''
      this.endDateLeft = ''
      this.water = 0
      this.chargeable = 0
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  background: linear-gradient(0deg, #E2E8F2, #C6E4FB);
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
  border-radius: 4px;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-box {
  width: 599px;
  text-align: center;
}

.content-box h3 {
  font-size: 38px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #299FAD;
}

.content-bottom {
  width: 575px;
  height: 480px;
  background: #FFFFFF;
  box-shadow: 0px 3px 27px 0px rgba(113, 147, 205, 0.16);
  border-radius: 10px;
  padding: 0 80px;
  box-sizing: border-box;
}

/deep/ .ant-tabs-nav-container {
  margin-top: 20px;
}

/deep/ .ant-tabs-nav {
  border-bottom: #C6C4C4;
}

.code {
  margin-top: 40px;
  text-align: center;
}

.code p {
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-top: 5px;
  color: #666666;
}

/deep/ .ant-calendar-picker-input.ant-input {
  width: 100%;
  height: 40px;
}

.btn {
  margin-top: 30px;
  width: 367px;
  height: 46px;
  background: linear-gradient(90deg, #28A1FF, #00C6F0);
  box-shadow: 0px 3px 7px 0px rgba(0, 148, 240, 0.28);
  border-radius: 8px;
  color: #FFFFFF;
  margin-left: 46px;
}

.money {
  width: 367px;
  margin-left: 47px;
  display: flex;
  margin-top: 30px;
}

.money-box {
  width: 50%;
  text-align: center;
}

.money-box span {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #666666;
}

.money-bottom {
  position: relative;
}
</style>